AVIF: Meet the Next Level Image File Format
It’s not often that you find better quality for a lower cost. But the Alliance for Open Media’s AVIF format represents a much-needed improvement on the JPEG format developed in the 1990s. While there are other alternatives, including PNG, GIF, and WebP, they all have serious shortcomings that the AVIF format overcomes.
The quality of AVIF images is noticeably superior to JPEG. Thanks to smaller file sizes AVIF images render more quickly in browsers, speeding up the experience of internet users, especially when they’re on mobile browsers. Smaller file sizes also ease the pain of monthly data caps and finite hardware storage limits on phones.
The AVIF format was first released in 2019. It was designed to improve compression methods and deliver better quality per byte while delivering superior visual appeal. AVIF is also royalty-free and supports high dynamic range (HDR) and other modern imaging techniques (more on that below).
Now that the new AVIF format is seeing widespread adoption and support by major players like Google, Apple, Mozilla, Microsoft, and Meta, it’s a sure bet that you’ve viewed AVIF images without even knowing it.
The Need for Speed
We've all given up on sites that took too long to load. There are also dozens of stats that confirm that load speed can make or break the success of a website. One study of over 100 million page views showed that conversion rates were three times higher for the fastest e-commerce websites¹. In another study, 70% of consumers said that a website’s load time affected their willingness to buy². Even for sites that aren’t e-commerce related, load speed can still affect how much time users spend engaging with content and search engine rankings.
Image sizes can be a big part of the load speed of a site, and they’re certainly the most straightforward problem for owners to fix. If a site owner converts their images to AVIF, file sizes can shrink to less than half that of JPEGs.
As a tangential benefit, smaller image sizes mean less storage space is used, which can mean lower costs for site owners. Reduced storage space could also mean that one day everyone will be able to store more photos on their phones.
AVIF has also seen heavy adoption by streaming services like Netflix.
“We have A/B tested AVIF-SDR image assets on web browsers and have observed improvements in our ‘time-to-render (TTR)’ metric,” said Aditya Mavlankar, senior software engineer for video algorithms at Netflix.
“TTR improvement was seen across a variety of client/network connections — and across browser implementations such as Chrome, Firefox, and Safari — with larger improvements materializing on the particularly slow connections."
The growing success of AVIF is gratifying for Jani Huoponen, group product manager for immersive audio and open media Codecs at Google, and a member of AOMedia's Codec Working Group. “Our goal was the development of royalty-free technology that would empower more web platforms, browsers, and users to stream video and images at higher quality."
How Does AVIF Compare to Other Codecs?
Images that use AVIF stand up extremely well in terms of visual quality, file size, and encoding speed when compared to other formats. Specifically, AVIF offers a maximum color depth of 12 bits in three color space channels and supports transparency. AVIF supports multiple color subsampling formats, including YUV 444 and YUV 420. While YUV 420 is a great fit for most images, YUV 444 subsampling helps avoid color bleeding with certain types of image content, for example. Nevertheless, most modern AVIF encoding tools support the sharp YUV feature (similar to sharp YUV in WebP) and YUV 420 sub-sampling with sharp YUV enabled mitigates most of the color bleeding.
Because of its age, JPEG is one of the most widely-supported formats. However, when compared to AVIF, JPEG images exhibit compression artifacts and image blocking. Users will see issues like fuzzy edges, ‘pixelation’, mosquito noise, and the ‘ghosts’ of colors appearing in nearby areas of the images. Color banding appears when the gradients in an uncompressed image are given coarse ‘staircase’ boundaries when compressed.
While PNGs have fine visual quality, they don’t reduce file size very much due to the lossless compression and therefore are less ideal for web content because of their large file sizes. WebPs provide great file size savings compared to JPG, but AVIF reduces file sizes even further.
GIF is the format that just won’t die, even though it only allows for 8-bit color (for a total of 256). From its earliest adventures as animations like “Under Construction”, “Dancing Baby”, and “Dancing Banana”, it thrived as the memeverse continued to expand in the past thirty years. With any luck, AVIF will start to bring better visual quality to Internet humor.
To test the compression capabilities of AVIF, members of the AOM encoded a set of animated GIFs to AVIF. Over the test set, animated AVIF files were an average of 78% smaller than the original GIF files:
- Campanile: -86.8%
- Ellipsis: -86.3%
- Greek_elements: -31.4%
- Kayak: -95.2
- Lilies: -87.6%
- Matthaeus: -89.9%
- Menthol: -80.7%
- Minor_edit: -85.1%
- Monyet: -92.5%
- Pen: -66.0%
- Plasma: -98.1%
- Portrait: -37.4%
- US_map: -82.0%
- Average: -78.4%
* AVIF encoder version: libaom version v3.5.0. Settings: speed 5, CQ 23 ** Test set: 15 sample GIFs from Wikipedia.
Another advantage of AVIFs for content creators is that they can be encoded and decoded very quickly, thanks to the format’s ability to leverage modern multi-core processors with multi-threaded encoding.
What Else Can AVIF Do?
There are other benefits to the AVIF format. Graphics specialists will be thrilled to know that it supports highly complex images of all kinds.
AVIF images can be used for both still and animated images. They also support high dynamic range (HDR) photos, which show the full detail in both the brightest areas and the darkest. Mixed media, custom metadata, and auxiliary images are also options for content creators.
Artists will be especially interested in the fact that they can create very large images (think gigapixels) as AVIFs as well.
Where is AVIF Supported?
Critically, the AVIF format is supported by top mobile and desktop browsers like Google Chrome, Mozilla Firefox, Apple’s Safari and Opera — you can view the full list with versions here.
If a site owner is using a content delivery network (CDN) to minimize latency, they’ll be glad to know that many of the top offerings support AVIF as well, including Cloudinary, Cloudflare, Akamai, Imgix, Adobe AEM Dynamic Media, ImageEngine and Fastly.
There is also a growing list of WordPress plugins and image compression tools that support AVIF as well:
- AutoOptimize
- ShortPixel Image Optimizer
- EWWW Image Optimizer
- Converted for Media
- Optimole
- ImageMagick
- FFmpeg
For photographers, Adobe Camera Raw supports AVIF natively. While graphic design tools like those in the Adobe Suite don’t support AVIFs yet, there is a strong push because so many browsers support the format (Windows PhotoShop users can download this plugin to use AVIFs. There are less complex tools that support AVIF as well, like GIMP, an image editor that works on macOS, GNU/Linux, Windows, as well as Microsoft’s Paint.NET. These can be used to make quick images for social media, and it won’t be long until other simpler tools will be using the format to unlock exciting new effects.
AVIF is supported in Windows 10 and Windows 11 by downloading the free AV1 Video Extension from the Microsoft app store. The AV1 Video Extension enables the viewing of AVIF still images in a variety of apps, such as:
- File Explorer (thumbnails, file metadata, and preview of AVIF images)
- Photos
- Paint
- Windows Media Player
- Office 365 (PowerPoint, Word, etc.)
AVIF decoding is supported out of the box on macOS Ventura and iOS 16. It’s also available for iPadOS 16 in any app that uses the system decoding APIs.
The AVIF Revolution is Growing
From the perspective of most people viewing web content, the growing adoption of AVIF is a silent revolution. After all, most people don’t right-click to check the format of every image they see.
From the perspective of designers, videographers, website owners, and web platform operators, however, AVIF’s unique convergence of advantages translates into a format decision that gets easier to make with every passing day.
References: